import React, { FC, useEffect, useState } from 'react'
import { Form, Input, Button, Tabs } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import { queryWaitCenterStorageCaseList, queryCenterStorageCaseList } from '~/api/property-management-api'

import WaitingList from './container/waiting-list'
import MovedList from './container/moved-list'
import { getUserInfo } from '~/mock/user/userinfo'
import NotifyModal from '~/components/notify-modal'

const { TabPane } = Tabs

const notifyList = [
  '对于价值较低、易于保管，或者需要作为证据继续使用，以及需要先行返还被害人、被侵害人的涉案财物，应由执法办案部门自行保管'
]

interface QueryListProps {
  caseName?: string
  caseNo?: string
}

const Home: FC = () => {
  const [form] = Form.useForm()
  const { resetFields } = form
  const [centerStorageCaseList, setCenterStorageCaseList] = useState([])
  const [movedList, setMovedList] = useState([])
  const navigate = useNavigate()
  const { state, pathname }: any = useLocation()
  const [notifyVisible, setNotifyVisible] = useState(false)
  const { activeKey = '1' } = state || { activeKey: '1' }

  const handleGetCenterStorageCaseList = async (params: QueryListProps) => {
    const userInfo = getUserInfo()
    const { data } = await queryWaitCenterStorageCaseList({
      ...userInfo,
      caseName: params.caseName === '' ? null : params.caseName,
      caseNo: params.caseNo === '' ? null : params.caseNo
    })
    setCenterStorageCaseList(data)
  }

  const handleMovedList = async (params: QueryListProps) => {
    const userInfo = getUserInfo()
    const { data } = await queryCenterStorageCaseList({
      ...userInfo,
      caseName: params.caseName === '' ? null : params.caseName,
      caseNo: params.caseNo === '' ? null : params.caseNo
    })
    setMovedList(data)
  }

  const showNotification = () => {
    setNotifyVisible(true)
  }

  const handleInitData = () => {
    handleGetCenterStorageCaseList({})
    handleMovedList({})
  }

  useEffect(() => {
    handleInitData()
    showNotification()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const onFinish = (val: any) => {
    handleGetCenterStorageCaseList(val)
    handleMovedList(val)
  }

  return (
    <div>
      <header>
        <Form validateTrigger="onBlur" layout="inline" form={form} onFinish={onFinish}>
          <Form.Item name="caseNo" label="案件编号：">
            <Input placeholder="请输入案件编号搜索" />
          </Form.Item>
          <Form.Item name="caseName" label="案件名称：">
            <Input placeholder="请输入案件名称搜索" />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit" type="primary">
              查询
            </Button>
            <Button
              onClick={() => {
                console.log('reset')
                resetFields()
                handleInitData()
              }}
              style={{ padding: 0, marginLeft: 8 }}
              type="link"
            >
              清空选项
            </Button>
          </Form.Item>
        </Form>
      </header>
      <main style={{ marginTop: 21 }}>
        <Tabs
          activeKey={activeKey}
          onChange={(activeKey: string) => {
            navigate(pathname, { replace: true, state: { ...state, activeKey } })
          }}
        >
          <TabPane tab={<span>案件列表({centerStorageCaseList.length})</span>} key="1">
            <WaitingList centerStorageCaseList={centerStorageCaseList} />
          </TabPane>
          <TabPane tab={<span>已录入集中保管信息({movedList.length})</span>} key="2">
            <MovedList movedList={movedList} />
          </TabPane>
        </Tabs>
      </main>
      <NotifyModal
        visible={notifyVisible}
        list={notifyList}
        onCancel={() => {
          setNotifyVisible(false)
        }}
      />
    </div>
  )
}

export default Home
